<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>品牌管理</title>
    <link rel="stylesheet" href="../css/elementui(1).css">
</head>
<body>
<div id="app">

    <el-form :inline="true">
        <el-form-item label="品牌名称">
            <el-input placeholder="品牌名称" v-model="searchMap.name"></el-input>
        </el-form-item>
        <el-form-item label="品牌首字母">
            <el-input placeholder="品牌首字母" v-model="searchMap.letter"></el-input>
        </el-form-item>
        <el-button type="primary" @click="fetchData">查询</el-button>
        <el-button type="primary" @click="formVisible = true">新增</el-button>
    </el-form>

    <el-table
            :data="tableData"
            border
            style="width: 100%">
        <el-table-column
                prop="id"
                label="ID"
                width="180">
        </el-table-column>
        <el-table-column
                prop="name"
                label="名称"
                width="180">
        </el-table-column>
        <el-table-column
                prop="letter"
                label="首字母"
                width="180">
        </el-table-column>
        <el-table-column
                label="图片">
            <template slot-scope="scope">
                <img :src="scope.row.image">
            </template>
        </el-table-column>
    </el-table>

    <el-pagination
            @size-change="fetchData"
            @current-change="handleCurrentChange"
            :current-page.sync="currentPage"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="size"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
    </el-pagination>

    <el-dialog
            title="品牌编译"
            :visible.sync="formVisible">

        <el-form label-width="80px">
            <el-form-item label="品牌名称">
                <el-input placeholder="品牌名称" v-model="pojo.name"></el-input>
            </el-form-item>
            <el-form-item label="品牌首字母">
                <el-input placeholder="品牌首字母" v-model="pojo.letter"></el-input>
            </el-form-item>
            <el-form-item label="品牌图片">
                <el-input placeholder="品牌图片" v-model="pojo.letter"></el-input>
            </el-form-item>
            <el-form-item label="品牌排序">
                <el-input placeholder="品牌排序" v-model="pojo.letter"></el-input>
            </el-form-item>

            <el-form-item>

                <el-button @click="save()">保存</el-button>
                <el-button @click="formVisible = false">关闭</el-button>

            </el-form-item>

        </el-form>


    </el-dialog>

</div>


</body>
<script src="../js/vue(1).js"></script>
<script src="../js/elementui(1).js"></script>
<script src="../js/axios.js"></script>

<script>
    new Vue({
        el: "#app",
        data() {
            return {
                tableData: [],
                currentPage:1,
                size:10,
                total:10,
                searchMap:{},
                formVisible:false
            }
        },
        created() {
            this.fetchData()
        },
        methods:{
            fetchData(){
                axios.get(`/brand/findPage.do?page=${this.currentPage}&size=${this.size}`,this.searchMap).then(response=>{
                    this.tableData=response.data.rows;
                    this.total=response.data.total
                })
        },
            save() {
                axios.get(`/brand/add.do`,this.pojo).then(response=>{
                    this.formVisible=false;
                    this.fetchData();
                })
            }
        }
    });
</script>
</html>